<template>
	<view class="i-storeItem">
		<view class="storeItem_left" @click="toClick">
			<view class="image" v-if="data.image">
				<image :src="data.image" mode=""></image>
			</view>
			<view class="left">
				<text class="title">{{data.serviceName}}</text>
				<view class="tags">
					<i-tag color="#8E8E93" border="1rpx solid #F0F0F2" bgColor="#fff"
						padding="0 8rpx">优惠金抵扣{{data.amountDiscount}}元</i-tag>
				</view>
				<view class="item_price">
					<i-price>{{data.price}}</i-price>
					<text class="not_price">抵扣后 ¥{{data.discountPrice}}</text>
				</view>
			</view>
		</view>
		<view class="storeItem_right">
			<view class="num" v-if="num">{{num}}</view>
			<i-buttons color="#FB652E" bgColor="rgba(251, 101, 46, 0.1)" border="none" @click="handleClick" :wait="300">添加</i-buttons>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		defineEmits,
		defineProps,
		computed
	} from 'vue'
	import useStore from '../../stores/index'
	import { navTo } from '../../utils/common';


	const props = defineProps({
		data: {
			type: Object,
			default: () => {
				return {}
			}
		},
		type: {
			type: String,
			default: ''
		},
		storeId: {
			type: String,
			default: ''
		}
	})
	const store = useStore()
	const emit = defineEmits(['click'])

	const shopForm = computed(() => {
		return store.shopForm
	})
	const num = computed(() => {
		const list = shopForm.value.shopList.filter(item => (item.oilId && item.oilId === props.data.serviceId)) || []
		if (!list.length) {
			return shopForm.value.shopList.find(item => item.serviceId === props.data.serviceId)?.dataNum || 0
		}
		const nums = list.length > 1 ? list.reduce((callback, current) => {
			return typeof callback === 'number' ? callback + current.dataNum : (callback.dataNum + current.dataNum)
		}) : list[0].dataNum
		return nums 
	})

	// const change = (type : string) => {
	// 	if (type === 'add') {
	// 		store.addShopForm(props.data);
	// 	} else {
	// 		store.removeShopForm(props.data);
	// 	}
	// }

	const handleClick = () => {
		emit('click')
	}
	const toClick = () => {
		if (props.type) {
			navTo(`/pages/views/oil_detail?oilId=${props.data.serviceId}&storeId=${props.storeId}`, 'navigateTo')
		}
	}
</script>

<style lang="scss" scoped>
	.i-storeItem {
		padding: 0 32rpx;
		@include flexRS;
		height: 82px;
		margin-bottom: 10px;

		.storeItem_left {
			width: 80%;
			@include flexR;

			.image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 8rpx;
				margin-right: 24rpx;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx;
				}
			}

			.left {
				@include flexC;
				width: 100%;
			}

			.title {
				max-width: 90%;
				@include titlefont(28rpx);
				margin-bottom: 4px;
				@include overflow;
			}

			.tags {
				margin-bottom: 4px;
			}

			.item_price {
				@include flexR;
				margin-top: 8rpx;

				.not_price {
					padding: 6rpx 24rpx;
					background-color: #FB652E;
					@include titlefont(26rpx);
					color: #fff;
					border-radius: 32rpx;
					margin-left: 8rpx;
				}
			}

		}

		.storeItem_right {
			position: relative;

			.num {
				top: -10rpx;
				right: -10rpx;
				width: 40rpx;
				height: 40rpx;
				@include flexRC;
				@include dfont(24rpx);
				position: absolute;
				border-radius: 50%;
				background-color: $dcolor;
				color: #fff;
				z-index: 9;
			}
		}
	}
</style>